<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- 编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动 -->
  <body>
    <div class="time">00:00:00</div>
    <button class="stop">暂停</button>
  </body>
  <script>
    var time = document.querySelector(".time");
    var isStop = true;
    function fn() {
      if (!isStop) return;
      var now = new Date();
      var h = String(now.getHours()).padStart(2, "0");
      var m = String(now.getMinutes()).padStart(2, "0");
      var s = String(now.getSeconds()).padStart(2, "0");
      time.innerHTML = `${h}:${m}:${s}`;
      setTimeout(fn, 1000);
    }
    fn();
    document.querySelector(".stop").addEventListener("click", function () {
      isStop = !isStop;
      this.innerHTML = "开始";
      if (isStop) {
        this.innerHTML = "暂停";
        fn();
      }
    });
  </script>
</html>
